<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>立即注册</title>
    <link href="../style.css" rel="stylesheet" />
    <link rel="stylesheet" href="../vendor/element/index.css">
    <link rel="icon" href="../favicon.ico">
</head>

<body>
<div class="app" id="app" v-cloak>
    <div class="bg-image" :style="{backgroundImage: `url(${picture})`}"></div>
    <div id="sign-in">
        <h3 class="login_title">用户注册</h3>
        <el-form
                ref="form"
                :model="form"
                :rules="rules"
        >
            <el-form-item label="登录账号" prop="account">
                <el-input v-model="form.account" type="text" clearable auto-complete="off" placeholder="账号"/>
            </el-form-item>
            <el-form-item label="账号描述" prop="shortName">
                <el-input v-model="form.shortName" type="text" clearable auto-complete="off" placeholder="账号"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password " type="password" clearable auto-complete="off" placeholder="密码"/>
            </el-form-item>

            <div class="btn-box">
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button type="info" @click="reSet">重置</el-button>
            </div>
        </el-form>
    </div>
</div>
<!--vue-->
<script src="../vendor/vue/vue.min.js"></script>
<!--element-->
<script src="../vendor/element/index.js"></script>
<!--引入axios-->
<script src="../vendor/axios/axios.min.js"></script><script src="../app.js" lang="javascript"></script>
<script>
    // 构建Vue实例
    let vn = new Vue({
        el: '#app',
        data: {
            form: {
                account: 'admin',
                password: 'admin',
                validCode: ''
            },
            rules: {
                account: [{ required: true, message: '请输入登录账号', trigger: "blur" }],
                password: [{ required: true, message: '请输入密码', trigger: "blur" }],
                shortName: [{ required: true, message: '请输入账号描述', trigger: 'blur' }],
            },
            loading: false,
            codeList: [],
            picture:'', //背景图片
        },
        methods: {
            //登录
            submit () {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        _axios.post('/sys-user/addOrUpdateUser', this.form).then(res => {
                            console.log(res)
                            if(res.code === 200){
                                this.$message({
                                    message: '注册成功',
                                    type: 'success'
                                });
                                window.location.href = './login.html' //登录成功跳转
                            }else{
                                this.$message({
                                    message: res.msg || '请求失败',
                                    type: 'error'
                                });
                            }

                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            reSet(){
                this.$refs.form.clearValidate();
                this.$refs.form.resetFields()
                this.form = {}
            },
            /**获取背景图片*/
            getImage(type){
                _axios.get('/load').then(res => {
                    if(res.code === 200){
                        this.picture = res.data.shortName ? `http://106.54.165.67:8080${res.data.shortName}` : '../mum.jpg'
                        localStorage.setItem('picture', res.data.shortName); // sessionStorage.setItem(TokenKey, token) 本地存储token
                    }else{
                        this.$message({
                            message: res.msg || '请求失败',
                            type: 'error'
                        });
                    }
                })
            },
        },
        created() {
            this.getImage()
        }
    })

</script>
</body>
</html>
